<template>
    <view class="com-user">
        <view class="user-main">
            <view class="avatar">
                <!-- <image src=""></image> -->
                <image src="/static/logo.png"></image>
            </view>
            <view class="uc">
                <view class="name" v-if="!$store.token">请登录</view>
                <view class="name" v-if="$store.user_info?.phone">{{ $store.user_info.phone }}</view>
                <!-- <view class="tip" v-if="!store.token">为您提供更好的服务请授权登录</view>
				<view class="tip" v-else>
					<view class="tb">狠馋一杯解乏忧</view>
				</view> -->
            </view>
            <view class="ur" @click="goLogin" v-if="!$store.token">
                登录
            </view>
            <!-- <view class="ucode" @click="goCode" v-else>
				<text class="cuIcon cuIcon-qrcode"></text>
			    会员码
			</view> -->
        </view>
    </view>
</template>

<script setup>

const {
    proxy
} = getCurrentInstance()

function goLogin() {
    proxy.$go('/pages/login/login')
}

// const user_info = ref({})

// onMounted(()=> {
//     user_info.value = proxy.$store.user_info
// })

// watch(()=> proxy.$store.user_info,(val)=> {
//     proxy.$store.user_info = val
// })

</script>

<style lang="scss" scoped>
.com-user {
    width: 100%;
    height: auto;
    padding: 0 20rpx 20rpx;
    margin-top: -40rpx;
    position: relative;
    z-index: 2;

    .user-main {
        width: 100%;
        padding: 20rpx;
        background: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;

        .avatar {
            width: 130rpx;
            height: 130rpx;
            border-radius: 50%;
            padding: 12rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 1px solid #ececec;
            }
        }

        .uc {
            flex: 1;
            padding-left: 10rpx;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: #000;

            }

            .tip {
                font-size: 24rpx;
                color: #999;
                margin-top: 10rpx;
                display: flex;
                align-items: center;

                .jf {
                    margin-left: 30rpx;
                }
            }
        }

        .ur {
            width: 140rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
            border-radius: 60rpx;
            justify-content: center;
            color: #fff;
            font-size: 26rpx;
            background-color: $main_color;
        }

        .ucode {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 24rpx;
            color: #999;

            .cuIcon {
                font-size: 44rpx;
                color: #000;
            }
        }
    }
}
</style>
